import React from 'react';
import {Layout,Drawer}from 'antd';
import Top from '../../Components/Top';
import MenuBar from '../../Components/MenuBar';
import PersonIn from '../../Components/PersonIn';
import RouterBeforeEach from '../../routers/RouterBeforeEach.js'
import axios from 'axios';
import { getLoginToken } from '../../common/Auth';
const {Header,Footer,Sider,Content}=Layout;
export default function Home(){
  const [collapsed,setCollapsed]=React.useState(false)
  const [visible,setVisible]=React.useState(false)
  React.useEffect(() => { 
    axios.defaults.headers['Authorization']=getLoginToken()
  }, [])
  let onCollapse = collapsed => {
    setCollapsed(collapsed)
  };
  const onClose=()=>{
    setVisible(false)
  }
  const on=()=>{
    setVisible(true)
  }
  return (
  <Layout style={{minHeight:'100vh'}}>
    <Header style={{color:'#fff',padding:'0 15px'}}>
      <Top></Top>
    </Header>
    <Layout>
      <Sider style={{backgroundColor:'#FFF'}} collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <MenuBar on={on}></MenuBar>
      </Sider>
      <Content style={{padding:'15px'}}>
        <RouterBeforeEach/>
      </Content>
    </Layout>
    <Footer style={{backgroundColor:'silver',height:'5vh',padding:'0',textAlign:'center',lineHeight:'5vh'}}>&copy;版权所有 aicoder.com 2022-2</Footer>
    <Drawer headerStyle={{textAlign:'center'}} title="个人信息" placement="right" onClose={onClose} visible={visible} closable={false}>
      <PersonIn></PersonIn>
    </Drawer>
  </Layout>

  );
}
